<template>
  <div>
    <div :id="arcId"></div>
  </div>
</template>

<script>
import esriLoader from "esri-loader";
// import pub from "@/assets/pubFile.json";

export default {
  data() {
    return {
      arcId: "viewDiv",
      map: null,
      view: null
    };
  },

  mounted() {
    this.mapInit();
  },

  methods: {
    mapInit: function() {
      //js来源
      let option = {
        url: "https://js.arcgis.com/4.13/"
      };
      //加载css
      esriLoader.loadCss(
        "https://js.arcgis.com/4.13/esri/themes/light/main.css"
      );
      esriLoader
        .loadModules(
          [
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/widgets/LayerList",
            "esri/widgets/Legend",
            "esri/PopupTemplate",
            "esri/layers/FeatureLayer",
          ],
          option
        )
        .then(([WebScene, SceneView, LayerList, Legend, PopupTemplate,FeatureLayer]) => {
          //引入arcgis online中的资源
          var map = new WebScene({
            portalItem: {
              id: "b0acf08441424200aad9c0144bf827cb"
            }
          });
          var view = new SceneView({
            container: "viewDiv",
            map: map
          });
          //选择器
          var layerList = new LayerList({
            view: view
          });
          view.ui.add(layerList, "top-right");

        //    const transitLayer = new FeatureLayer({
        //   url:
        //     "https://services6.arcgis.com/xbaWRxxIB28Lj0q6/arcgis/rest/services/ys/FeatureServer",
        //   elevationInfo: {
        //     mode: "relative-to-ground",
        //     offset: 10
        //   },
        //   title: "Transit lines in Lyon",
        //   definitionExpression: "sens='Aller'",
        //   outFields: ["*"]
        // });
        // webscene.add(transitLayer);

          //图例
          // var legend = new Legend({
          //   view: view,
          //   layerInfos: [
          //     {
          //       title: "Legend"
          //     }
          //   ]
          // });
          // view.ui.add(legend, "bottom-right");


        });
    }
  }
};
</script>
<style scoped>
#viewDiv {
  width: 100%;
  height: 800px;
}
.esri-ui-corner .esri-expand .esri-widget--panel, .esri-ui-corner .esri-expand .esri-widget--panel-height-only, .esri-ui-corner .esri-component .esri-widget--panel, .esri-ui-corner .esri-component.esri-widget--panel{
  width: 200px;
}
</style>